<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: flex;
            /*默认值：row 是水平方向为主轴 从左到右*/
            /*flex-direction: row;*/
            /*row-reverse反转 主轴还是水平，是从右到左 */
            /*flex-direction: row-reverse;*/

            /*column 主轴就是垂直方向，从上到下*/
            /*flex-direction: column;*/
            /*column-reverse主轴是垂直方法 从下到上 */
            flex-direction: column-reverse;

            width: 500px;
            height: 500px;
            border: 1px solid red;
        }

        .box1{
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: #00f;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    文本
</body>
<script type="text/javascript">

</script>

</html>
